<template>
    <div id = "option-dual-number">
      <div id = "option-title"> {{optionTitle}} </div>
      <div id = "item">
        <div id = "AFT" :class = "text === 'AFT'? 'selected':'unselected'">AFT</div>
        <div id = "FORE" :class = "text === 'FORE'? 'selected':'unselected' ">FORE</div>
      </div>

      <div> ▲ </div>
      <div id = "option-val"> {{value}} </div>
      <div> ▼ </div>
      <div> [{{optionObj.rang}}] </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        text: 'FORE'
      }
    },
    computed: {
      value: function () {
        if (this.text === 'FORE') {
          return this.optionObj.FORE
        } else {
          return this.optionObj.AFT
        }
      }
    },
    props: {
      optionObj: {
        type: Object,
        twoWay: true,
        require: true
      },
      optionTitle: {
        type: String,
        twoWay: true,
        require: true
      },
      isShowOption: {
        type: Boolean,
        twoWay: true
      }
    },
    ready () {
      this.getLeft = function () {
        this.text = 'AFT'
      }

      this.getRight = function () {
        if (this.text === 'FORE') {
          this.isShowOption = false
        } else {
          this.text = 'FORE'
        }
      }

      this.Up = function () {
        if (this.text === 'AFT') {
          this.optionObj.AFT++
          if (this.optionObj.AFT > this.optionObj.rang[1]) {
            this.optionObj.AFT = this.optionObj.rang[1]
          }
        } else {
          this.optionObj.FORE++
          if (this.optionObj.FORE > this.optionObj.rang[1]) {
            this.optionObj.FORE = this.optionObj.rang[1]
          }
        }
      }

      this.Down = function () {
        if (this.text === 'AFT') {
          this.optionObj.AFT--
          if (this.optionObj.AFT < this.optionObj.rang[0]) {
            this.optionObj.AFT = this.optionObj.rang[0]
          }
        } else {
          this.optionObj.FORE--
          if (this.optionObj.FORE < this.optionObj.rang[0]) {
            this.optionObj.FORE = this.optionObj.rang[0]
          }
          console.log('ret ----' + this.optionObj.FORE)
        }
      }
    }
  }
</script>

<style lang = "less">
  #option-dual-number {
    text-align: center;
    border:2px solid;
    width: 250px;
  }

  #option-title {
    background-color: dodgerblue;
    color: white;
  }

  #item {
    display: inline-block;
  }

  #AFT {
    display: inline-block;
    width: 100px;
  }

  #FORE {
    display: inline-block;
    width: 100px;
  }

  .selected {
    background-color: black;
    color: white;
  }

  .unselected {
    background-color: gray;
    color: black;
  }

  #option-val {
    color: white;
    background-color: black;
    width: 100px;
    position: relative;
    left: 75px;
  }
</style>
